<style>
	.image {
		width: 100%;
		display: block;
	}
</style>
<template>
	<div id="suggest_approve">
		<!--工具条-->
		<div name="searchColums">
			<el-form :inline="true" :model="filters" size="small" ref="filters" class="searchForm">
				<el-form-item class="el-form-item" label="楼名称" prop="buildingName">
					<el-input class="filter-item" placeholder="楼名称" v-model="filters.buildingName"></el-input>
				</el-form-item>
				<el-form-item class="el-form-item" label="单元名称" prop="unitName">
					<el-input class="filter-item" placeholder="单元名称" v-model="filters.unitName"></el-input>
				</el-form-item>
				<el-form-item class="el-form-item" label="房屋名称" prop="houseName">
					<el-input class="filter-item" placeholder="房屋名称" v-model="filters.houseName"></el-input>
				</el-form-item>

				<span class="bth_search">
          <el-form-item>
            <el-button type="success" icon="el-icon-search" v-on:click="getDataGrid(true)">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-refresh" @click="resetSearchForm('filters')">重置</el-button>
          </el-form-item>
        </span>
			</el-form>
		</div>
		<!--toolbar-->
		<el-row id="toolbar_unit">
			<el-col :span="24">
				<div class="grid-content bg-purple-light">
					<el-button type="success" size="mini" icon="el-icon-check" @click="handleAdd">新增</el-button>
				</div>
			</el-col>
		</el-row>

		<!--列表-->
		<el-table :data="gridDatas" id="dataGrid" empty-text=" " border stripe size="mini" :header-row-class-name="headStyle" highlight-current-row v-loading="listLoading" :row-class-name="tableRowClassName" @sort-change="handleSortChange" @selection-change="selsChange" style="width: 100%;">
			<el-table-column type="selection" width="45"></el-table-column>
			<el-table-column prop="index" :formatter="index_formatter" label="序号" width="60"></el-table-column>
			<el-table-column prop="communityName" label="小区名称" width="140" show-overflow-tooltip></el-table-column>
			<el-table-column prop="buildingName" label="楼名称" width="100" show-overflow-tooltip></el-table-column>
			<el-table-column prop="unitName" label="单元名称" width="100" show-overflow-tooltip></el-table-column>
			<el-table-column prop="houseName" label="房屋名称" width="100" show-overflow-tooltip></el-table-column>
			<el-table-column prop="startDate" label="开始时间" width="110" show-overflow-tooltip></el-table-column>
			<el-table-column prop="endDate" label="结束时间" width="110" show-overflow-tooltip></el-table-column>
			<el-table-column prop="feeTypeName" label="费用类型" width="110" show-overflow-tooltip></el-table-column>
			<el-table-column prop="zhekou" label="折扣" width="70" show-overflow-tooltip></el-table-column>
			<el-table-column prop="beizhu" label="折扣说明" show-overflow-tooltip></el-table-column>
			<el-table-column label="操作" fixed="right" width="180">
				<template slot-scope="scope">
					<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
					<el-button type="danger" size="mini" @click="handleDel(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!--工具条-->
		<el-col :span="24" class="toolbar" id="pageDiv">
			<el-pagination small background @current-change="handleCurrentChange" @size-change="handleSizeChange" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="total" layout="total,sizes, prev, pager, next" style="float:right;"></el-pagination>
		</el-col>

		<!--编辑界面-->
		<el-dialog title="编辑" :visible.sync="editFormVisible" :close-on-click-modal="false">
			<el-form :model="editForm" label-width="80px" :rules="addFormRules" ref="editForm" size="mini">
				<el-col :span="8">
					<el-form-item label="所属小区" prop="communityId">
						<el-select size="small" v-model="editForm.communityId" placeholder="请选择" @change="handleSelectBuilding">
							<el-option v-for="communitItem in communityOptions" :key="communitItem.id" :label="communitItem.name" :value="communitItem.id">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="楼宇" prop="buildingId">
						<el-select size="small" v-model="editForm.buildingId" placeholder="请选择" @change="handleSelectUnit">
							<el-option v-for="(buildingItem,index) in buildingOptions" :key="index" :label="buildingItem.name" :value="buildingItem.id">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="单元" prop="unitId">
						<el-select size="small" v-model="editForm.unitId" placeholder="请选择" @change="handleSelectHouse">
							<el-option v-for="(unitItem,index) in unitOptions" :key="index" :label="unitItem.name" :value="unitItem.id">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="房屋" prop="houseId">
						<el-select size="small" v-model="editForm.houseId" placeholder="请选择">
							<el-option v-for="(houseItem,index) in houseOptions" :key="houseItem.id" :label="houseItem.houseName" :value="houseItem.id">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="费用类型" prop="feeType">
						<el-select size="small" v-model="editForm.feeType" placeholder="请选择">
							<el-option v-for="item in feeTypeOptions" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="折扣" prop="zhekou">
						<el-input v-model.number="editForm.zhekou" size="small" placeholder="折扣"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="折扣说明" prop="beizhu">
						<el-input v-model="editForm.beizhu" size="small" placeholder="请输入"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="开始时间" prop="startDate">
						<el-date-picker type="date" placeholder="开始时间" v-model="editForm.startDate"></el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="结束时间" prop="endDate">
						<el-date-picker type="date" placeholder="结束时间" v-model="editForm.endDate"></el-date-picker>
					</el-form-item>
				</el-col>
				<el-input v-model="editForm.id" type="hidden" style="display: none!important;"></el-input>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="editFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
			</div>
		</el-dialog>

		<!--新增界面-->
		<el-dialog title="新增" :visible.sync="addFormVisible" @close="handleAddBeforeClose" :close-on-click-modal="false">
			<el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm" size="small">
				<el-col :span="8">
					<el-form-item label="所属小区" prop="communityId">
						<el-select size="small" v-model="addForm.communityId" placeholder="请选择" @change="handleSelectBuilding">
							<el-option v-for="communitItem in communityOptions" :key="communitItem.id" :label="communitItem.name" :value="communitItem.id">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="楼宇" prop="buildingId">
						<el-select size="small" v-model="addForm.buildingId" placeholder="请选择" @change="handleSelectUnit">
							<el-option v-for="(buildingItem,index) in buildingOptions" :key="index" :label="buildingItem.name" :value="buildingItem.id">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="单元" prop="unitId">
						<el-select size="small" v-model="addForm.unitId" placeholder="请选择" @change="handleSelectHouse">
							<el-option v-for="(unitItem,index) in unitOptions" :key="index" :label="unitItem.name" :value="unitItem.id">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="房屋" prop="houseId">
						<el-select size="small" v-model="addForm.houseId" placeholder="请选择">
							<el-option v-for="(houseItem,index) in houseOptions" :key="houseItem.id" :label="houseItem.houseName" :value="houseItem.id">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="费用类型" prop="feeType">
						<el-select size="small" v-model="addForm.feeType" placeholder="请选择">
							<el-option v-for="item in feeTypeOptions" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="折扣" prop="zhekou">
						<el-input v-model.number="addForm.zhekou" size="small" placeholder="折扣"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="折扣说明" prop="beizhu">
						<el-input v-model="addForm.beizhu" size="small" placeholder="请输入"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="开始时间" prop="startDate">
						<el-date-picker type="date" placeholder="开始时间" v-model="addForm.startDate"></el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="结束时间" prop="endDate">
						<el-date-picker type="date" placeholder="结束时间" v-model="addForm.endDate"></el-date-picker>
					</el-form-item>
				</el-col>
				<el-input v-model="addForm.id" type="hidden" style="display: none!important;"></el-input>

			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="addFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="addSubmit" :loading="editLoading">提交</el-button>
			</div>
		</el-dialog>

	</div>
</template>
<script>
	import { getToken, setToken, removeToken, getFileIp } from '@/util/auth'
	import { getUUID } from '@/util/util'
	import request from '@/router/axios'
	export default {
		name: 'feeZhekou',
		data() {
			return {
				communityOptions: [],
				buildingOptions: [],
				unitOptions: [],
				houseOptions: [],
				//单元过滤条件
				filters: {
					buildingName: '',
					unitName: '',
					houseName: ''
				},
				url: {
					//单元数据
					list: '/admin/sysFeeZhekou/page',
					save: '/admin/sysFeeZhekou/add',
					edit: '/admin/sysFeeZhekou/edit',
					del:"/admin/sysFeeZhekou/del"
				},
				gridDatas: [],
				feeTypeOptions: [],
				sort: {
					sort: 'sort',
					order: 'asc'
				},
				total: 0,
				page: 1,
				pageSize: 10,
				listLoading: false,
				sels: [],
				editLoading: false,
				editFormVisible: false,
				addFormVisible: false,
				editForm: {},
				addForm: {
					id: undefined,
					communityId:undefined,
					buildingId: undefined,
					unitId: undefined,
					houseId: undefined,
					feeType:undefined,
					zhekou: undefined,
					beizhu: undefined,
					startDate:undefined,
					endDate:undefined
					
				},
				addFormRules: {
					houseId: [{
						required: true,
						message: '请选择房屋 '
					}],
					feeType: [{
						required: true,
						message: '请选择费用类型 '
					}],
					startDate: [{
						required: true,
						message: '请选择开始时间 '
					}],
					endDate: [{
						required: true,
						message: '请选择结束时间 '
					}],
					zhekou: [{
							required: true,
							message: '请填写折扣 '
						},
						{
							type: 'number',
							message: '请填写数字 '
						}
					]
				}
			}
		},
		methods: {
			//初始化下拉框
			initData: function() {
				request.get('/admin/community?getCommunitysByUserId').then(res => {
					if(res.status === 200) {
						this.communityOptions = res.data
					}
				});
				request.get("/admin/dict/type/fee_type").then((res) => {
					if(res.status === 200) {
						var data = res.data;
						var feeTypeS = [];
						for(var i = 0; i < data.length; i++) {
							if(data[i].value == "0"||data[i].value == "6") {
								feeTypeS.push(data[i]);
							}
						}
						this.feeTypeOptions = feeTypeS;
					}
				});

			},
			handleAddBeforeClose() {
				this.$refs.addForm.resetFields()
			},
			handleSelectBuilding() {
				if(this.addFormVisible) {
					this.addForm.buildingId = ''
					this.addForm.unitId = ''
					this.addForm.houseId = ''
				} else {
					this.editForm.buildingId = ''
					this.editForm.unitId = ''
					this.editForm.houseId = ''
				}

				this.buildingOptions = []
				this.unitOptions = []
				this.houseOptions = []
				request
					.get(
						'/admin/communityBuilding/getCommunityBuildings/' +
						(this.addFormVisible ? this.addForm.communityId : this.editForm.communityId)
					)
					.then(res => {
						if(res.status === 200) {
							this.buildingOptions = res.data
						}
					})
			},
			handleSelectUnit() {
				if(this.addFormVisible) {
					this.addForm.unitId = ''
					this.addForm.houseId = ''
				} else {
					this.editForm.unitId = ''
					this.editForm.houseId = ''
				}

				this.unitOptions = []
				this.houseOptions = []
				request
					.get(
						'/admin/communityBuilding/getBuildingUnits/' + (this.addFormVisible ? this.addForm.buildingId : this.editForm.buildingId)
					)
					.then(res => {
						if(res.status === 200) {
							// 判断楼宇下单元数据是否为空
							if(res.data.length === 0) {
								// 说明该楼宇下没有单元数据，直接去获取到房屋列表
								this.unitOptions = []
								request
									.get(
										'/admin/unitHouse/getUnitHousesByBuildingId/' +
										(this.addFormVisible? this.addForm.buildingId : this.editForm.buildingId)
									)
									.then(res => {
										if(res.status === 200) {
											this.houseOptions = res.data
										}
									})
							} else {
								this.unitOptions = res.data
							}
						}
					})
			},
			handleSelectHouse() {
				if(this.addFormVisible) {
					this.addForm.houseId = ''
				} else {
					this.editForm.houseId = ''
				}

				this.houseOptions = []
				request
					.get('/admin/unitHouse/getUnitHouses/' + (this.addFormVisible ? this.addForm.unitId : this.editForm.unitId))
					.then(res => {
						if(res.status === 200) {
							this.houseOptions = res.data
						}
					})
			},

			handleSortChange(sort) {
				this.sort = {
					sort: sort.prop,
					order: sort.order == 'ascending' ? 'asc' : 'desc'
				}
				this.getDataGrid()
			},
			tableRowClassName(row, index) {
				//把每一行的索引放进row
				row.index = row.rowIndex
			},
			headStyle({
				row,
				rowIndex
			}) {
				return 'table_head_style'
			},
			index_formatter: function(row, column, cellValue, index) {
				//放回索引值
				return this.pageSize * (this.page - 1) + 1 + index
			},
			handleCurrentChange(val) {
				this.page = val
				this.getDataGrid()
			},
			handleSizeChange(val) {
				this.pageSize = val
				this.page = 1
				this.getDataGrid()
			},
			resetSearchForm(formName) {
				this.$refs.filters.resetFields()
			},
			selsChange: function(sels) {
				this.sels = sels
			},
			handleDel: function(index, row) {
				this.$confirm('确认删除该记录吗?', '提示', {
					type: 'warning'
				}).then(() => {
					this.listLoading = true;
					let para = {
						id: row.id
					};
					request.get(this.url.del+"/"+row.id).then((res) => {
						this.listLoading = false;
						this.$message({
							message: '删除成功',
							type: 'success',
							duration: 1500
						});
						this.getDataGrid();
					});
				}).catch(() => {

				});
			},

			//新增
			handleAdd: function() {
				this.addFormVisible = true
				this.buildingOptions = []
				this.unitOptions = []
				this.houseOptions = []
			},
			//显示编辑界面
			handleEdit: function(index, row) {
				this.editFormVisible = true;
				//加载字典项
				request
					.get(
						'/admin/communityBuilding/getCommunityBuildings/' + row.communityId
					)
					.then(res => {
						if(res.status === 200) {
							this.buildingOptions = res.data
						}
					});
				request
					.get(
						'/admin/communityBuilding/getBuildingUnits/' + row.buildingId
					)
					.then(res => {
						if(res.status === 200) {
							// 判断楼宇下单元数据是否为空
							if(res.data.length === 0) {
								// 说明该楼宇下没有单元数据，直接去获取到房屋列表
								this.unitOptions = []
								request
									.get(
										'/admin/unitHouse/getUnitHousesByBuildingId/' + row.buildingId
									)
									.then(res => {
										if(res.status === 200) {
											this.houseOptions = res.data
										}
									})
							} else {
								this.unitOptions = res.data
							}
						}
					});
				if(row.unitId) {
					request
						.get('/admin/unitHouse/getUnitHouses/' + row.unitId)
						.then(res => {
							if(res.status === 200) {
								this.houseOptions = res.data
							}
						})
				}

				this.editForm = Object.assign({}, row);
			},
			//编辑
			editSubmit: function() {
				this.$refs.editForm.validate(valid => {
					if(valid) {
						this.$confirm('确认提交吗？', '提示', {}).then(() => {
							this.editLoading = true
							let para = Object.assign({}, this.editForm)
							request.post(this.url.edit, para).then(res => {
								this.editLoading = false
								this.$message({
									message: '提交成功',
									type: 'success',
									duration: 1500
								})
								this.$refs['editForm'].resetFields()
								this.editFormVisible = false
								this.getDataGrid()
							})
						})
					}
				})
			},
			addSubmit: function() {
				this.$refs.addForm.validate(valid => {
					if(valid) {
						this.$confirm('确认提交吗？', '提示', {}).then(() => {
							this.editLoading = true
							let param = Object.assign({}, this.addForm)
							request.post(this.url.save, param).then(res => {
								this.editLoading = false
								this.$message({
									message: '提交成功',
									type: 'success',
									duration: 1500
								})
								this.$refs['addForm'].resetFields()
								this.addFormVisible = false
								this.getDataGrid()
							})
						})
					}
				})
			},

			//获取单元列表数据
			getDataGrid(flag) {
				//获取当前树节点选中小区
				if(flag){
      				this.page = 1;
     			 }
				let para = {
					params: {
						page: this.page,
						limit: this.pageSize,
						//排序
						orderByField: this.sort.sort,
						isAsc: this.sort.order,
						type: '0',
						buildingName: this.filters.buildingName,
						unitName: this.filters.unitName,
						houseName: this.filters.houseName
					}
				}
				this.listLoading = true
				request.get(this.url.list, para).then(res => {
					this.total = res.data.total
					var datas = res.data.records
					this.gridDatas = datas
					this.listLoading = false
				})
			}
		},
		mounted() {
			this.getDataGrid()
			this.initData()
		}
	}
</script>